<template>
    <el-dialog title="IC卡领用" :visible.sync="dialogForm" width="400px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="add-form" label-width="110px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="卡编号:" prop="selfNo">
                        <span>{{ form.selfNo }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="卡号:" prop="cardNo">
                        <span>{{ form.cardNo }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="卡类型:" prop="cardTypeDesc">
                        <span>{{ form.cardTypeDesc }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="车号" prop="carNo">
                        <el-input v-model="form.carNo" placeholder="" :disabled="form.cardTypeDesc === '月结卡'||form.cardTypeDesc === '员工卡'"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="货主" prop="cargoOwnerName">
                        <el-input v-model="form.cargoOwnerName" placeholder="" :disabled="form.cardTypeDesc === '车卡'||form.cardTypeDesc === '员工卡'"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="人员名称" prop="personName">
                        <el-input v-model="form.personName" placeholder="" :disabled="form.cardTypeDesc === '车卡'||form.cardTypeDesc === '月结卡'"></el-input>
                    </el-form-item>
                </el-col>
           </el-row>
           <el-row>
                <el-col :span="24">
                    <el-form-item label="领用时间" prop="personName">
                        <el-date-picker
                            v-model="form.value"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
           </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { addIcCardUse } from "@/api/icCard/icCard"
    import { maxLength, sortLength } from "@/utils/rules";
    import { PUBLIC_LIMIT, REG_ALL_NUMBER, PUBLIC_NUMBER_NULL,REG_NUMBER } from "@/utils/Reg"
    export default {
        name: "icCarduseForm",
        data() {
            return {
                form: this.clearForm(),
                rules: {
                    // carNo: [{ required: true, validator:PUBLIC_LIMIT, trigger: 'blur' },sortLength],
                    // cargoOwnerName: [{ required: true, validator:PUBLIC_LIMIT, trigger: 'blur' },sortLength],
                    // personName: [{ required: true, validator:PUBLIC_LIMIT, trigger: 'blur' },sortLength],
                },
                dialogForm: false,
                cardTypeDesc:'',
                disabled:false
            }
        },
        methods: {
            clearForm() {
                return {
                    selfNo:"",
                    cardNo:"",
                    cardTypeDesc:"",
                    carNo:'',
                    cargoOwnerName:'',
                    personName:'',
                    value:''  
                }
            },
            // 保存
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        addIcCardUse(this.form.id, this.form).then(res => {
                            this.$message({ message: '领用成功!', type: 'success' })
                            this.dialogForm = false
                            this.$emit('load')
                        })    
                    } else {
                        this.$message({
                            message: '请检查表单',
                            type: 'error'
                        })
                    }
                })
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$refs.form.resetFields()
                    this.isEdit = false
                    this.form = this.clearForm()
                    this.$emit('clear')
                }
            },
        },
    }
</script>

<style scoped>

</style>
